<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.4/css/mouse.css}" media="all">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<div class="layuimini-container"
     style=" margin: 10px 10px 10px 10px; text-align: center;height: 560px;
     background-image: url(static/images/bg.jpg);
       background-repeat: no-repeat;
background-size: cover">
    <h1>欢迎来到轻云酒店后台管理系统</h1>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="chart1" style="width: 600px;height:400px;float: left"></div>
    <div id="chart2" style="width: 600px; height: 400px; float: left" ></div>
</div>
</body>
<script th:src="@{/static/lib/layui-v2.8.4/miniMouse.js}" charset="utf-8"></script>
<script>
    var chartDom = document.getElementById('chart1');
    var myChart = echarts.init(chartDom);
    var option;
    const spirit ='path://m270,175.41c0.1,-0.76 0.16,-1.53 0.16,-2.3c0,-13.44 -15.36,-24.33 -34.3,-24.33c-14.7,0 -27.21,6.58 -32.09,15.8c-3.23,-2.52 -7.84,-4.12 -13.02,-4.12c-9.76,0 -17.67,5.61 -17.67,12.53c0,0.82 0.13,1.62 0.34,2.39c-13.02,1.52 -22.98,9.48 -22.98,19.15c0,10.75 12.29,19.47 27.44,19.47l87.12,0c15.16,0 27.44,-8.71 27.44,-19.47c0.01,-9.54 -9.69,-17.45 -22.46,-19.11z'
    var maxData = 2000;
    option = {
        tooltip: {},
        xAxis: {
            max: maxData,
            splitLine: {show: false},
            offset: 10,
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                margin: 10
            }
        },
        yAxis: {
            data: ['单人房', '双人房', '大床房', '家庭房','商务房','衔接房','高级套房','主题套房'],
            inverse: true,
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
                margin: 10,
                color: '#0c0c0c',
                fontSize: 16
            }
        },
        grid: {
            top: 'center',
            height: 400,
            left: 80,
            right: 100
        },
        series: [
            {
// current data
                type: 'pictorialBar',
                symbol: spirit,
                symbolRepeat: 'fixed',
                symbolMargin: '5%',
                symbolClip: true,
                symbolSize: 30,
                symbolBoundingData: maxData,
                data: [891, 1220, 660, 1670,450,227,335,666],
                markLine: {
                    symbol: 'none',
                    label: {
                        formatter: 'max: {c}',
                        position: 'start'
                    },
                    lineStyle: {
                        color: 'green',
                        type: 'dotted',
                        opacity: 0.2,
                        width: 2
                    },
                    data: [
                        {
                            type: 'max'
                        }
                    ]
                },
                z: 10
            },
            {
// full data
                type: 'pictorialBar',
                itemStyle: {
                    opacity: 0.2
                },
                label: {
                    show: true,
                    formatter: function (params) {
                        return ((params.value / maxData) * 100).toFixed(1) + ' %';
                    },
                    position: 'right',
                    offset: [10, 0],
                    color: 'black',
                    fontSize: 20
                },
                animationDuration: 0,
                symbolRepeat: 'fixed',
                symbolMargin: '5%',
                symbol: spirit,
                symbolSize: 30,
                symbolBoundingData: maxData,
                data: [891, 1220, 660, 1670,450,227,335,666],
                z: 5
            }
        ]
    };

    // Make dynamic data.
    function random() {
        return +(Math.random() * (maxData - 10)).toFixed(1);
    }

    setInterval(function () {
        const dynamicData = [random(), random(), random(), random(),random(), random(), random(), random()];
        myChart.setOption({
            series: [
                {
                    data: dynamicData.slice()
                },
                {
                    data: dynamicData.slice()
                }
            ]
        });
    }, 3000);

    option && myChart.setOption(option);
</script>
<script>
    var chartDom1 = document.getElementById('chart2');
    var myChart1 = echarts.init(chartDom1);
    var option1;

    option1 = {
        xAxis: {
            type: 'category',
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '30%']
        },
        visualMap: {
            type: 'piecewise',
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [
                {
                    gt: 1,
                    lt: 3,
                    color: 'rgba(0, 0, 180, 0.4)'
                },
                {
                    gt: 5,
                    lt: 7,
                    color: 'rgba(0, 0, 180, 0.4)'
                }
            ]
        },
        series: [
            {
                type: 'line',
                smooth: 0.6,
                symbol: 'none',
                lineStyle: {
                    color: '#5470C6',
                    width: 5
                },
                markLine: {
                    symbol: ['none', 'none'],
                    label: { show: false },
                    data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
                },
                areaStyle: {},
                data: [
                    ['2019-10-10', 200],
                    ['2019-10-11', 560],
                    ['2019-10-12', 750],
                    ['2019-10-13', 580],
                    ['2019-10-14', 250],
                    ['2019-10-15', 300],
                    ['2019-10-16', 450],
                    ['2019-10-17', 300],
                    ['2019-10-18', 100]
                ]
            }
        ]
    };

    option1 && myChart1.setOption(option1);
</script>
</html>